<template>
    <div>
        <Form @submit="register(registerForm,repassword)">
            <CellGroup inset>
                <Field label-width="5em" label-align="left" name="头像"
                    style="display: flex;align-items: center;justify-content: center;" label="上传头像"
                    :rules="[{ required: true, message: '请上传头像' }]">
                    <template #input>
                        <Uploader :after-read="afterRead" v-model="showFile" style="width: 155px;" multiple
                            :max-size="5000 * 1024" @oversize="onOversize" :max-count="1"
                            accept="image/png, image/jpeg, image/gif, image/jpg" upload-text="png /jpeg /gif /jpg格式图片">
                        </Uploader>

                    </template>
                </Field>
                <Field label-width="3em" label-align="left" :clearable="true" v-model="registerForm.username" name="用户名"
                    label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
                <Field label-width="3em" label-align="left" :clearable="true" v-model="registerForm.phone" type="phone"
                    name="手机号" label="手机号" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
                <Field label-width="3em" label-align="left" :clearable="true" v-model="registerForm.password"
                    type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <Field label-width="5em" label-align="left" :clearable="true" v-model="repassword" type="password"
                    name="确认" label="确认密码" placeholder="确认密码" :rules="[{ required: true, message: '请填写确认密码' }]" />
                <Field label-width="2.8em" label-align="left" label="角色">
                    <template #input>
                        <RadioGroup v-model="registerForm.role" direction="horizontal" icon-size="15px">
                            <Radio name="1">老师</Radio>
                            <Radio name="2">家长</Radio>
                            <Radio name="3">学生</Radio>
                        </RadioGroup>
                    </template>
                </Field>
            </CellGroup>
            <div style="margin: 16px;">
                <Button round block type="primary" native-type="submit" size="small">
                    注 册
                </Button>
            </div>
        </Form>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { Button, Popup, Form, CellGroup, Field, Radio, RadioGroup, Uploader } from "vant";
import { register, uploadPic } from "@/v-api/login";
import { Local } from "@/utils/storage";
const registerForm = reactive({
    username: "",
    phone: "",
    role: "2",
    password: "",
    iconUrl: '',
});
const repassword = ref('');
const showFile = ref([
]);
const afterRead = async(file) => {
   
    registerForm.iconUrl=await uploadPic(file);
    Local.set('iconUrl',registerForm.iconUrl);
};

const onOversize = (files) => {
    Toast(`文件大小不能超过 ${files[0].maxSize / 1024}MB`);
};
</script>
<style scoped></style>